<template>
  <div v-loading="loading">
    <!-- filter start -->
    <el-form ref="filterForm" :inline="true" :model="filterForm" label-width="100px" size="small">
      <el-form-item
        prop="name"
        label="审核状态："
      >
        <el-radio-group v-model="filterForm.status">
          <el-radio label="">全部状态</el-radio>
          <el-radio
            v-for="(v,k) in statusOptions"
            :key="k"
            :label="k"
          >{{ v }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <div>
        <el-form-item label=" ">
          <el-button type="primary" round @click="submitFilterForm">查询审批</el-button>
          <el-button round @click="resetFilterForm">重置条件</el-button>
        </el-form-item>
      </div>

    </el-form>
    <!-- filter end -->

    <!-- 表格 start -->
    <div>
      <div class="btn-group">
        <el-button type="text" :disabled="userIds.length===0" size="small" @click="handlePass('batch')">批量通过</el-button>
        <el-button type="text" :disabled="userIds.length===0" size="small" @click="handleRefuse('batch')">批量拒绝</el-button>
      </div>
      <el-table :data="list" border stripe size="small" @selection-change="handleTableSelectionChange">
        <el-table-column label="序号" type="index" align="center" width="60">
          <template slot-scope="scope">
            <span>{{ (paginationConfig.page - 1) * paginationConfig.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55" fixed="left" :selectable="tableCheckboxInit" />
        <el-table-column prop="" label="姓名" />
        <el-table-column prop="" label="登录名" />
        <el-table-column prop="" label="手机" />
        <el-table-column prop="" label="申请部门" />
        <el-table-column prop="" label="备注" />
        <el-table-column prop="" label="申请时间" />
        <el-table-column label="操作" width="150">
          <!--          <template slot-scope="scope">-->
          <!--            <el-button type="primary" round size="mini" @click="handlePass">通过</el-button>-->
          <!--            <el-button type="danger" round size="mini" @click="handleRefuse">拒绝</el-button>-->
          <!--          </template>-->
        </el-table-column>
      </el-table>
      <PaginationDirection
        v-if="paginationConfig.total!==0"
        :config="paginationConfig"
        @sizesChange="fetchData"
        @pageChange="fetchData"
      />
    </div>
    <!-- 表格 end -->
  </div>
</template>

<script>
import { spPage } from '@/api/sp/index'

export default {
  data() {
    return {
      // 配置
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      statusOptions: {
        0: '待审批',
        1: '已通过',
        2: '已拒绝'
      },
      // 状态
      loading: false,
      // 数据
      filterForm: {
        status: ''
      },
      list: [],
      userIds: [], // 用户的id
      users: [] // 用户的name
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {

  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取列表
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 请求参数
      const params = Object.assign({}, this.filterForm)
      params.pageNum = page
      params.pageSize = pageSize
      // 清除多余字段
      for (const key in params) {
        if (this.$isNull(params[key])) delete params[key]
      }
      // 请求
      this.loading = true
      spPage({ data: params })
        .then(res => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 按钮组
     */
    // 查询
    submitFilterForm() {
      this.fetchData(1)
    },

    // 重置
    resetFilterForm() {
      this.$refs.filterForm.resetFields()
    },

    // 通过
    handlePass() {

    },

    // 拒绝
    handleRefuse() {

    },
    /**
     * 状态组
     */
    // 初始化table多选按钮
    tableCheckboxInit(row) {
      if (row.status === 0) return 1
      else return 0
    },

    // 多选状态栏改变
    handleTableSelectionChange(rows) {
      if (rows) {
        const ids = []
        const users = []
        rows.map(item => {
          ids.push(item.id)
          users.push(item.name)
        })
        this.userIds = ids
        this.users = users
      }
    }
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
